<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>机器人</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        /* 隐藏body窗口区域滚动条 */
      }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "./three.js-dev/build/three.module.js",
          "three/addons/": "./three.js-dev/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three'
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
      window.THREE = THREE
      // 创建场景对象
      var scene = new THREE.Scene()

      // 头部网格模型和组
      var headMesh = sphereMesh(10, 0, 0, 0)
      headMesh.name = '脑壳'
      var leftEyeMesh = sphereMesh(1, 8, 5, 4)
      leftEyeMesh.name = '左眼'
      var rightEyeMesh = sphereMesh(1, 8, 5, -4)
      rightEyeMesh.name = '右眼'
      var headGroup = new THREE.Group()
      headGroup.name = '头部'
      headGroup.add(headMesh, leftEyeMesh, rightEyeMesh)
      // 身体网格模型和组
      var neckMesh = cylinderMesh(3, 10, 0, -15, 0)
      neckMesh.name = '脖子'
      var bodyMesh = cylinderMesh(14, 30, 0, -35, 0)
      bodyMesh.name = '腹部'
      var leftLegMesh = cylinderMesh(4, 60, 0, -80, -7)
      leftLegMesh.name = '左腿'
      var rightLegMesh = cylinderMesh(4, 60, 0, -80, 7)
      rightLegMesh.name = '右腿'
      var legGroup = new THREE.Group()
      legGroup.name = '腿'
      legGroup.add(leftLegMesh, rightLegMesh)
      var bodyGroup = new THREE.Group()
      bodyGroup.name = '身体'
      bodyGroup.add(neckMesh, bodyMesh, legGroup)
      // 人Group
      var personGroup = new THREE.Group()
      personGroup.name = '人'
      personGroup.add(headGroup, bodyGroup)
      personGroup.translateY(50)
      scene.add(personGroup)

      // 球体网格模型创建函数
      function sphereMesh(R, x, y, z) {
        var geometry = new THREE.SphereGeometry(R, 25, 25) //球体几何体
        var material = new THREE.MeshPhongMaterial({
          color: 0x0000ff,
        }) //材质对象Material
        var mesh = new THREE.Mesh(geometry, material) // 创建网格模型对象
        mesh.position.set(x, y, z)
        return mesh
      }
      // 圆柱体网格模型创建函数
      function cylinderMesh(R, h, x, y, z) {
        var geometry = new THREE.CylinderGeometry(R, R, h, 25, 25) //球体几何体
        var material = new THREE.MeshPhongMaterial({
          color: 0x0000ff,
        }) //材质对象Material
        var mesh = new THREE.Mesh(geometry, material) // 创建网格模型对象
        mesh.position.set(x, y, z)
        return mesh
      }
      // 光源设置
      let pointLight = new THREE.PointLight(0xffffff)
      pointLight.position.set(160, 100, 140) // 点光源位置
      scene.add(pointLight)
      //环境光
      var ambient = new THREE.AmbientLight(0x444444)
      scene.add(ambient)
      // 相机设置
      var width = window.innerWidth
      var height = window.innerHeight
      var k = width / height
      var s = 200 //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
      camera.position.set(200, 300, 200) //设置相机位置
      camera.lookAt(scene.position) //设置相机方向(指向的场景对象)

      scene.traverse(function (obj) {
        if (obj.type === 'Group') {
          console.log(obj.name)
        }
        if (obj.type === 'Mesh') {
          console.log('  ' + obj.name)
          obj.material.color.set(0xffff00)
        }
        if ((obj.name === '左眼') | (obj.name === '右眼')) {
          obj.material.color.set(0x000000)
        }
        // 打印id属性
        console.log(obj.id)
        // 打印该对象的父对象
        console.log(obj.parent)
        // 打印该对象的子对象
        console.log(obj.children)
      })
      
      // 创建渲染器对象
      var renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height) //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1) //设置背景颜色
      renderer.shadowMap.enabled = true // 开启阴影渲染
      document.body.appendChild(renderer.domElement) //body元素中插入canvas对象

      renderer.render(scene, camera)
      function renderScene() {
        renderer.render(scene, camera)
      }
      let controls = new OrbitControls(camera, renderer.domElement) //创建控件对象
      controls.addEventListener('change', renderScene) //监听鼠标，键盘事件


    </script>
  </body>
</html>
